<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    :auto="false"
    @scroll="scroll"
    :refresher-enabled="true"
  >
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 全部评价 </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="flex flex-col gap-4 p-4">
      <view class="bg-[#FFFFFF] rounded-[.5rem] px-4 py-2 flex justify-between items-center">
        <view class="text-[.9375rem] text-[#161A24] font-bold"> 评分 </view>
        <view class="flex gap-1 items-baseline">
          <view class="flex relative justify-end">
            <view
              class="bg-gradient-to-r from-[#FFBF3A]/30 to-white h-[.375rem] w-[115%] absolute rounded-[.1875rem] bottom-1 z-20"
            >
            </view>
            <view class="flex relative z-20 items-baseline gap-[0.0625rem]">
              <text class="font-[oxanium] text-[1.125rem] text-[#002021] font-bold">{{
                (d.score || 0).toFixed(1)
              }}</text>
              <text class="text-[.625rem] text-[#002021]">分</text>
            </view>
          </view>
          <u-rate :count="5" v-model="d.score" size="25" active-color="#FFBF3A"></u-rate>
        </view>
      </view>
      <!-- 评论信息 -->
      <view class="flex flex-col gap-4 p-4 bg-[#FFFFFF] rounded-[.75rem]">
        <view class="flex justify-between items-center">
          <view class="flex gap-1 items-center">
            <view class="text-[.9375rem] text-[#161A24] font-bold">钓友评价</view>
            <view class="text-[.6875rem] text-[#8E9299]" v-if="d?.total_comment">{{ d?.total_comment || 0 }}条</view>
          </view>
        </view>
        <view v-for="(i, k) in dataList" :key="k" class="flex gap-1 justify-between">
          <view
            class="size-6 border-[.0625rem] border-solid border-[#F2F5F7] rounded-full overflow-hidden flex-none"
            @click="vk.navigateTo(`/pages/my/otherIndex?id=${i.user_id}`)"
          >
            <image class="size-full" :src="i.user.avatar" mode="aspectFill" />
          </view>
          <view class="flex flex-col flex-1">
            <view class="flex gap-1 items-center">
              <view class="text-[.75rem] text-[#5C6068] line-clamp-1"> {{ i?.user?.nickname || '-' }}333 </view>
              <view class="text-[.625rem] text-[#C0C4CC] whitespace-nowrap">{{ i?.create_time_str || '-' }} </view>
            </view>
            <view class="flex justify-between items-start">
              <view class="text-[.8125rem] text-[#161A24] flex-1">{{ i?.content || '-' }}</view>
              <view class="flex gap-1 justify-end items-center w-8" @click="changeGood(i)">
                <image src="/static/dddr8.png" class="size-4" mode="aspectFill" v-if="i.is_like" />
                <image src="/static/dddr7.png" mode="aspectFill" class="size-4" v-if="!i.is_like" />
                <view class="text-[.5625rem] text-[#8E9299]" v-if="i.like_num">{{ i.like_num }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        count: 2, // 评论总数
        value: 2, // 评论加载数量
        d: {}, // 详情数据
        id: '' // 商品ID
      }
    },
    onShow(options) {
      setTimeout(() => {
        this.$refs.paging.reload()
      }, 0)
    },
    onLoad(options) {
      this.id = options.id
    },

    methods: {
      async changeGood(i) {
        if (this.d.to_blacklist) {
          vk.toast('操作失败，暂无权限')
          return
        }

        vk.pubfn.debounce(async () => {
          // 保存原始状态用于回滚
          const originalIsLike = i.is_like
          const originalLikeNum = i.like_num || 0

          // 乐观更新：立即更新UI状态
          i.is_like = !i.is_like

          // 更新点赞数量
          if (i.is_like) {
            // 点赞：数量+1
            i.like_num = originalLikeNum + 1
          } else {
            // 取消点赞：数量-1，但不能小于0
            i.like_num = Math.max(0, originalLikeNum - 1)
          }

          try {
            const res = await api.commentLike({
              comment_id: i.id
            })

            if (!res.code) {
              // 接口失败，回滚状态
              i.is_like = originalIsLike
              i.like_num = originalLikeNum
              return
            }

            // 可选：使用服务器返回的最新数据更新状态
            if (res.data && typeof res.data.is_like !== 'undefined') {
              i.is_like = res.data.is_like
              i.like_num = res.data.like_num || i.like_num
            }
          } catch (error) {
            i.is_like = originalIsLike
            i.like_num = originalLikeNum
          }

          // 移除页面刷新，因为已经实现了乐观更新
          // this.$refs.paging.refresh()
        }, 500)
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        const [detailRes, commentRes] = await Promise.all([
          api.getBasanDetail({
            id: this.id,
            lat: vk.getVuex('$user.positioning').lat || '',
            lng: vk.getVuex('$user.positioning').lng || ''
          }),
          api.getCommentList({
            basan_id: this.id,
            page,
            limit
          })
        ])
        this.d = detailRes.data
        this.$refs.paging.complete(commentRes.data)
      }
    }
  }
</script>

<style lang="scss" scoped></style>
